<template>
  <div class="editEettlement">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
			<el-form-item label="子商户名称：" prop="type">
        <div class="hei">{{showName}}</div>
			</el-form-item>
      <div class="list">
				<el-form-item label="原结算卡号：">
					<el-input v-model="ruleForm.accountNo" ></el-input>
				</el-form-item>
			</div>
      <div class="list">
				<el-form-item label="变更后结算卡号：">
					<el-input v-model="ruleForm.updateAccountNo" placeholder="请输入变更后结算卡号"></el-input>
				</el-form-item>
			</div>
      <div class="list">
				<el-form-item label="原开户人名称：">
					<el-input v-model="ruleForm.accountName"></el-input>
				</el-form-item>
			</div>
      <div class="list">
				<el-form-item label="变更后开户人名称：">
					<el-input v-model="ruleForm.updateAccountName" placeholder="请输入变更后开户人名称"></el-input>
				</el-form-item>
			</div>
      <div class="list">
				<el-form-item label="原联行卡号：">
					<el-input v-model="ruleForm.bankCode"></el-input>
				</el-form-item>
			</div>
      <div class="list">
				<el-form-item label="变更后联行卡号：">
					<el-input v-model="ruleForm.updateBankCode" placeholder="请输入变更后联行卡号"></el-input>
				</el-form-item>
			</div>
      <div class="list">
				<el-form-item label="原结算卡银行名称：">
					<el-input v-model="ruleForm.bankName"></el-input>
				</el-form-item>
			</div>
      <div class="list">
				<el-form-item label="变更后结算卡银行名称：">
					<el-input v-model="ruleForm.updateBankName" placeholder="请输入变更后结算卡银行名称"></el-input>
				</el-form-item>
			</div>
      <div class="list">
				<el-form-item label="原结算卡银行支行名称：">
					<el-input v-model="ruleForm.bankBranch"></el-input>
				</el-form-item>
			</div>
      <div class="list">
				<el-form-item label="变更后结算卡银行支行名称:">
					<el-input v-model="ruleForm.updateBankBranch" placeholder="请输入变更后结算卡银行支行名称"></el-input>
				</el-form-item>
			</div>
      <div class="list">
				<el-form-item label="原结算卡类型：">
					<el-select v-model="ruleForm.settleBankType" placeholder="请选择结算卡类型">
						<el-option v-for="item in updateSettleBankTypeList" :key="item.id" :label="item.value" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</div>
      <div class="list">
				<el-form-item label="变更后结算卡类型：">
					<el-select v-model="ruleForm.updateSettleBankType" placeholder="请选择结算卡类型">
						<el-option v-for="item in updateSettleBankTypeList" :key="item.id" :label="item.value" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</div>
      	<div class="list">
				<el-form-item label="结算卡方式：">
					<el-select v-model="ruleForm.settlementMode" placeholder="请选择结算卡方式">
						<el-option v-for="item in settlementModeList" :key="item.id" :label="item.value" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</div>
      <div class="list">
				<el-form-item label="结算人身份证号：">
					<el-input v-model="ruleForm.settlementIdCardNo" placeholder="请输入身份证号"></el-input>
				</el-form-item>
			</div>
      <div class="list">
				<el-form-item label="结算人人身份证开始日期：" >
					<el-date-picker
						v-model="ruleForm.settlementIdCardStartDate"
						type="date"
            value-format="yyyy-MM-dd"
						placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
			</div>
			<div class="list">
				<el-form-item label="结算人人身份证结束日期：">
					<el-date-picker
						v-model="ruleForm.settlementIdCardEndDate"
						type="date"
            :disabled='ruleForm.idCardValidType'
            value-format="yyyy-MM-dd"
						placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
        <div class="longTime">
          <el-checkbox
            v-model="ruleForm.idCardValidType"
            @change="changeCardValidType"
            >长期有效</el-checkbox
          >
        </div>
			</div>
      <div class="culom">
        <div class="list">
          <el-form-item label="结算指定账户书：">
            <upload
              title="上传指定账户书"
              imgType="authorizationForSettlement"
              :img="ruleForm.authorizationForSettlement"
              @success="handleUploadSuccess"
            />
          </el-form-item>
        </div>
        <div class="list">
          <el-form-item label="银行开户证明：">
            <upload
              title="上传银行开户证明"
              imgType="accountOpeningCertificate"
              :img="ruleForm.accountOpeningCertificate"
              @success="handleUploadSuccess"
            />
          </el-form-item>
        </div>
      </div>
      <div class="culom">
        <div class="list">
          <el-form-item label="持卡人身份证正面：">
            <upload
              title="上传身份证正面"
              imgType="settleFrontOfIdCard"
              :img="ruleForm.settleFrontOfIdCard"
              @success="handleUploadSuccess"
            />
          </el-form-item>
        </div>
        <div class="list">
          <el-form-item label="持卡人身份证反面：">
            <upload
              title="上传身份证反面"
              imgType="settleBackOfIdCard"
              :img="ruleForm.settleBackOfIdCard"
              @success="handleUploadSuccess"
            />
          </el-form-item>
        </div>
      </div>
			<div class="culom">
					<div class="list">
						<el-form-item label="手持身份证照片：">
							<upload
								title="上传手持身份证照片"
                imgType="handheldOfIdCard"
								:img="ruleForm.handheldOfIdCard"
								@success="handleUploadSuccess"
							/>
						</el-form-item>
					</div>
					<div class="list">
						<el-form-item label="手持银行卡照片：">
							<upload
								title="上传手持银行卡照片"
                imgType="handheldOfBankCard"
								:img="ruleForm.handheldOfBankCard"
								@success="handleUploadSuccess"
							/>
						</el-form-item>
					</div>
				</div>
				<div class="culom">
					<div class="list">
						<el-form-item label="转租证明：" >
							<upload
								title="上传转租证明"
                imgType="subleaseCertificate"
								:img="ruleForm.subleaseCertificate"
								@success="handleUploadSuccess"
							/>
						</el-form-item>
					</div>
					<div class="list">
						<el-form-item label="结算卡照：">
							<upload
								title="上传结算卡照"
                imgType="bankCard"
								:img="ruleForm.bankCard"
								@success="handleUploadSuccess"
							/>
						</el-form-item>
					</div>
				</div>	
        <div class="btn">
          <el-button @click="resetForm('ruleForm')" >取消</el-button>
          <el-button @click="submitForm('ruleForm')" type="primary">提交</el-button>
			</div>
		</el-form>
    <div class="right">
      <div class="bt">提交说明:</div>
      <p>1、结算人为法人、对公结算、非法人改法人或对公结算情况，只变更银行卡号、银行行号、开户行的，直接通过接口变更，如系统已存在有效资料可无须再提供
        （包括：已有有效结算信息照片、法人身份证正反面、有效营业执照的情况）；若系统原无有效资质情况下的，需补充有效资质审核无误后方可变更。</p>

      <p>2、企业商户非同名变更，法人对私账户变更为对公户或对公账户变更法人对私账户，直接通过接口变更，同时变更账户类型和银行卡号。</p>

      <p>3、对公账户变更为非法人结算：结算账户指定书、结算卡照片、结算人身份证正反面、结算人手持结算卡、结算人手持身份证。-接口校验必须传<p>

      <p>4、个体工商户非同名变更非法人结算变更：结算账户指定书、结算卡照片、结算人身份证正反面、结算人手持身份证、身份证、转租证明等资料。（需风控审批）<p>

      <p>5、个人商户只允许修改银行卡号、银行行号、开户行，不得修改结算人或非法人结算。</p>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
// components
import Loading from '@/components/Loading/index'
import Upload from '@/components/Upload/index'

// api
import {
 editSettlement,
 gettlebankInfo,
} from '@/api/moneyManagement'

export default {
  components: {
    Loading,
    Upload,
  },
  props: {
    visible: Boolean,
    id: String
  },
  data() {
    var validateSonId = (rule, value, callback) => {
      if (value != '')  {
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
        if (reg.test(value) === false) {
          callback(new Error('请输入正确的身份证号'));
        }
        callback();
      }
    };
    return {
			typeList: [
				{id:1,value: '合利宝'},
				{id:2,value: '工行'},
			],
			merchantTypeList: [
				{id:1,value: '合利宝'},
				{id:2,value: '工行'},
			],
      showName: '',
      ruleForm: {
				accountNo: '',//原结算银行卡号
				updateAccountNo: '',//变更后结算卡号
				accountName: '',//原开户人名称
				updateAccountName: '',//变更后开户人名称
				bankCode: '',//原联行卡号
				updateBankCode: '',//变更后联行卡号
        bankName: '',//原结算卡银行名称
        updateBankName: '',//变更后结算卡银行名称：
        bankBranch: '',//原结算卡银行支行名称：
        updateBankBranch: '',//变更后结算卡银行支行名称
				settleBankType: '',//原结算卡类型
				updateSettleBankType: '',//变更后结算卡类型
				settlementMode: '',//结算卡方式
				settlementIdCardNo: '',//结算人身份证号
				settlementIdCardStartDate: '',//结算人人身份证开始日期
				settlementIdCardEndDate: '',//结算人人身份证结束日期
        idCardValidType: false,//是否长期有效

        merchantNo: '',
        
        authorizationForSettlement: '',//上传指定账户书
        accountOpeningCertificate: '',//上传银行开户证明
        settleFrontOfIdCard: '',//上传身份证正面
        settleBackOfIdCard: '',//上传身份证反面
        handheldOfIdCard: '',//上传手持身份证照片
        handheldOfBankCard: '',//上传手持银行卡照片
        subleaseCertificate: '',//上传转租证明
        bankCard: '',//结算卡照：


				
			},
			rules: {
				accountNo: [
					{ required: false, message: '请输入结算卡联行号', trigger: 'blur' },
          { min:1, max: 30, message: '输入为1～30个字，请重新输入', trigger: 'blur' }
				],
        updateAccountNo: [
					{ required: false, message: '请输入结算卡联行号', trigger: 'blur' },
          { min:1, max: 30, message: '输入为1～30个字，请重新输入', trigger: 'blur' }
				],
        accountName: [
					{ required: false, message: '请输入原结算卡联行号', trigger: 'blur' },
          { min:1, max: 50, message: '输入为1～50个字，请重新输入', trigger: 'blur' }
				],
        updateAccountName: [
					{ required: false, message: '请输入变更后开户人名称', trigger: 'blur' },
          { min:1, max: 50, message: '输入为1～50个字，请重新输入', trigger: 'blur' }
				],
        bankCode: [
					{ required: false, message: '请输入原联行卡号', trigger: 'blur' },
          { min:1, max: 13, message: '输入为1～13个字，请重新输入', trigger: 'blur' }
				],
        updateBankCode: [
					{ required: false, message: '请输入变更后联行卡号', trigger: 'blur' },
          { min:1, max: 13, message: '输入为1～13个字，请重新输入', trigger: 'blur' }
				],
        bankName: [
					{ required: false, message: '请输入原结算卡银行支行名称', trigger: 'blur' },
          { min:1, max: 50, message: '输入为1～50个字，请重新输入', trigger: 'blur' }
				],
        updateBankName: [
					{ required: false, message: '请输入变更后结算卡银行支行名称', trigger: 'blur' },
          { min:1, max: 50, message: '输入为1～50个字，请重新输入', trigger: 'blur' }
				],
        bankBranch: [
					{ required: false, message: '请输入原结算卡银行支行名称', trigger: 'blur' },
          { min:1, max: 50, message: '输入为1～50个字，请重新输入', trigger: 'blur' }
				],
        updateBankBranch: [
					{ required: false, message: '请输入原结算卡银行支行名称', trigger: 'blur' },
          { min:1, max: 50, message: '输入为1～50个字，请重新输入', trigger: 'blur' }
				],
        settleBankType: [
					{ required: false, message: '请选择原结算卡类型', trigger: 'blur' },
				],
        updateSettleBankType: [
					{ required: false, message: '请选择变更后结算卡类型', trigger: 'blur' },
				],
        settlementMode: [
					{ required: false, message: '请选择结算卡方式', trigger: 'blur' },
				],
        settlementIdCardNo: [
					{ required: false,validator:validateSonId , trigger: 'blur' },
				],
        settlementIdCardStartDate: [
					{ required: false, message: '请选择身份证起始日期', trigger: 'blur' },
				],
        settlementIdCardEndDate: [
					{ required: false, message: '请选择身份证结束日期', trigger: 'blur' },
				],
        authorizationForSettlement: [{ required: false, message: '请上传图片', trigger: 'blur' }],
        accountOpeningCertificate: [{ required: false, message: '请上传图片', trigger: 'blur' }],
        settleFrontOfIdCard: [{ required: false, message: '请上传图片', trigger: 'blur' }],
        settleBackOfIdCard: [{ required: false, message: '请上传图片', trigger: 'blur' }],
        handheldOfIdCard: [{ required: false, message: '请上传图片', trigger: 'blur' }],
        handheldOfBankCard: [{ required: false, message: '请上传图片', trigger: 'blur' }],
        subleaseCertificate: [{ required: false, message: '请上传图片', trigger: 'blur' }],
        bankCard: [{ required: false, message: '请上传图片', trigger: 'blur' }],
			}
    
    }
  },
  computed: {
    ...mapState({
      updateSettleBankTypeList: function(state) {
        return state.common['merchant_hlb_settle_bank_type'] // 要取this的实例，只能用不同函数，不能用箭头函数
      },
      settlementModeList: function(state) {
        return state.common['merchant_hlb_settlement_mode'] // 要取this的实例，只能用不同函数，不能用箭头函数
      },

      
     
    })
  },
  created() {
    this.ruleForm.merchantNo = this.$route.query.merchantNo
    this.showName = this.$route.query.showName
    this.getDetail()
	},
  methods: {
    //修改前数据回显
    getDetail(){
      var id = this.ruleForm.merchantNo
      gettlebankInfo(id).then(res => {
        const {result} = res
        this.ruleForm.accountNo = result.accountNo
        this.ruleForm.accountName = result.accountName
        this.ruleForm.bankCode = result.bankCode
        this.ruleForm.bankName = result.bankName
        this.ruleForm.bankBranch = result.bankBranch
        this.ruleForm.settleBankType = result.settleBankType
      }).finally(() => {
        this.loading = false
      })
    },
    // 图片上传
    handleUploadSuccess(data) {
      if(data.imgType == 'authorizationForSettlement'){
        this.ruleForm.authorizationForSettlement = data.url
      }else if(data.imgType == 'accountOpeningCertificate'){
        this.ruleForm.accountOpeningCertificate = data.url
      }else if(data.imgType == 'settleFrontOfIdCard'){
        this.ruleForm.settleFrontOfIdCard = data.url
      }else if(data.imgType == 'settleBackOfIdCard'){
        this.ruleForm.settleBackOfIdCard = data.url
      }else if(data.imgType == 'handheldOfIdCard'){
        this.ruleForm.handheldOfIdCard = data.url
      }else if(data.imgType == 'handheldOfBankCard'){
        this.ruleForm.handheldOfBankCard = data.url
      }else if(data.imgType == 'subleaseCertificate'){
        this.ruleForm.subleaseCertificate = data.url
      }else if(data.imgType == 'bankCard'){
        this.ruleForm.bankCard = data.url
      }
    },
		submitForm(formName) {
       console.log('1111111',formName)
			this.$refs[formName].validate((valid) => {
        console.log('1111111',valid)
				if (valid) {
          const params = {
            ...this.ruleForm
          }
          console.log('params',params)
          editSettlement(params).then(res => {
            const {msg,status} = res.result 
            var type = ''
            if(status == 'AUDITED'){
              type = 'success'
            }else{
              type = 'error'
            }
            this.$message({
              message: msg,
              type: type,
              duration: 1500,
            })
          }).finally(() => {
            this.loading = false
          })
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
      this.$router.go(-1)
		},
		gettype(){
			console.log(this.ruleForm.merchantType)
		},
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
      })
    },
    //勾选长期有效
    changeCardValidType(value) {
      this.ruleForm.settlementIdCardEndDate = "";
      // this.$refs.ruleForm.fields.map((i) => {
      //   if (i.prop === "idCardEndDate") {
      //     i.clearValidate();
      //   }
      // });
    },

  }
}
</script>
<style lang="scss" scoped>
@import './style/editEettlement';


</style>
